<script>
export default {
  props: {
    styles: {
      type: Object,
      default: ()=>{}
    },
    show: {
      type:Boolean,
      default: false
    },
    item: {
      type: Object,
      defalut: ()=>{}
    }
  },
  watch: {
    show: {
      handler(nv) {
        if(nv) {
          this.styleObj = Object.assign(this.styleObj, this.styles)
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      styleObj: {
        'transform-origin': 'center bottom',
        'z-index': 1030,
        'position': 'fixed',
        'transform': 'translate(-50%, -150%)'
      }
    }
  },
  methods: {
    del() {
      this.$emit('del', this.item)
    }
  }
}
</script>

<template>
  <div v-if="show" role="tooltip" id="el-popover-1622" aria-hidden="false" class="el-popover el-popper" tabindex="0" :style="styleObj" x-placement="top">
    <div class="el-popconfirm"><p class="el-popconfirm__main">
      请选择操作:
    </p>
      <div class="el-popconfirm__action">
        <button type="button" class="el-button el-button--danger el-button--mini" @click="del"><span>
        删除
      </span></button>
<!--        <button type="button" class="el-button el-button&#45;&#45;primary el-button&#45;&#45;mini"><span>-->
<!--        编辑-->
<!--      </span></button>-->
      </div>
    </div>
    <div x-arrow="" class="popper__arrow" style="left: 67.5px;"></div>
  </div>
</template>

<style scoped lang="scss">

</style>
